<template>
    <div class="miaosha">
        <!-- 秒杀列表  -->
        <div class="top">
            <p>京东秒杀</p>
            <span>{{hours}}点开始</span>
            <!-- 倒计时组件：:time是倒计时框中显示的时间 -->
            <van-count-down :time="times">
                <template #default="timeData">
                    <span class="block">{{ formatTime(timeData.hours) }}</span>
                    <span class="colon">:</span>
                    <span class="block">{{ formatTime(timeData.minutes) }}</span>
                    <span class="colon">:</span>
                    <span class="block">{{ formatTime(timeData.seconds) }}</span>
                </template>
            </van-count-down>
        </div>
        <div class="list">
            <!-- 商品秒杀 -->
            <van-swipe :loop="false" :width="120" :show-indicators="false">
                <van-swipe-item v-for="(item, index) in miaoshaArr" :key="index">
                    <img :src="item.img1" alt="">
                    <p>￥{{ item.originprice }}元</p>
                </van-swipe-item>

            </van-swipe>
        </div>


    </div>
</template>

<script setup lang="ts">
// 引入秒杀列表接口
import { seckillListApi } from '@/api/homeAPI'
import { ref, reactive, computed, watch, defineProps, defineEmits } from 'vue'
// 定义秒杀列表数组
let miaoshaArr: any = ref([])
// 调用秒杀列表接口
let values = { count: 1, limitNum: 6 }
async function getmiaosha(values: { count: number, limitNum: number }) {
    let res: any = await seckillListApi(values)
    console.log('秒杀列表', res);
    miaoshaArr.value = res.data
}
getmiaosha(values)

// 定义几点场
const hours = ref(0)
// 定义要倒计时的时间
const times = ref(0)
// 处理时间格式自动补0利用计算属性
const formatTime = computed(()=>(num: number) => {
    return num < 10 ? '0' + num : num
})

// 获取当前时间
const date = new Date()
let hour = date.getHours()//获取小时
let year = date.getFullYear()//获取年
let month = date.getMonth() + 1//获取月
let day = date.getDate()//获取日

// 两小时开始一次秒杀
// 假设每天的八点十点12点...开始一场秒杀，如果现在是6点，则hour+2，如果是11点则hour+1
if (hour % 2 === 0) {
    hour += 2
} else {
    hour += 1
}
// 用于显示几点场,现在的小时
hours.value = hour - 2
// 如果时间到24点，进入下一天，时间变为0，日期+1
if (hour === 24) {
    hour = 0
    day += 1
    // 你要是不知道13578十腊，我看你这个ios兼容怎么写
    if (
        (day === 31 && [1, 3, 5, 7, 8, 10, 11].indexOf(month) === -1) ||
        (day === 32 && [1, 3, 5, 7, 8, 10, 11].indexOf(month) !== -1)
    ) {
        day = 1
        month += 1
        if (month === 13) {
            month = 1
            year += 1
        }
    }
}
// 计算剩余时间的数字:未来时间（秒杀开始的时间）-现在时间
times.value = new Date(`${year}/${month}/${day} ${hour}:00:00`).getTime() - date.getTime()
</script>
<style scoped lang="scss">
.miaosha {
    width: 355px;
    height: 200px;
    background-color: rgb(255, 251, 246);
    border-radius: 10px;
    margin: 0 auto;

    .top {
        width: 100%;
        height: 40px;
        display: flex;
        justify-content: space-around;
        align-items: center;

        p {
            // height: 100%;
            width: 140px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .van-count-down {
            margin: 0 0 0 8px;
        }

        .colon {
            display: inline-block;
            margin: 0 4px;
            color: #ee0a24;
        }

        .block {
            display: inline-block;
            width: 22px;
            color: #fff;
            font-size: 12px;
            text-align: center;
            background-color: #ee0a24;
        }
    }

    .list {

        // height: 80px;
        .van-swipe-item {
            width: 110px;

            img {
                width: 100px;
                height: 100px;
            }

            p {
                color: #ee0a24
            }
        }
    }

}
</style>